<%--
  Created by IntelliJ IDEA.
  User: ASUS
  Date: 2020/12/28
  Time: 15:05
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
    //获取项目名称
    String path = request.getContextPath();
    //获取: 协议://服务器名称:/端口号+ path +"/"
    //http://localhost:8080/StuAndTeacher/  --->main.jsp
    String basePath = request.getScheme() + "://"
            + request.getServerName() + ":" + request.getServerPort()
            + path + "/";
%>
<html>
<head>
    <title>Title</title>
    <base href="<%=basePath%>">
    <link rel="stylesheet" href="layui/css/layui.css">
    <script src="layui/layui.js"></script>
    <script src="jquery/jquery-1.8.3.js"></script>
<body>

<div class="layui-form-item" id="div">
    <label class="layui-form-label">学号:</label>
    <div class="layui-input-inline">
        <input type="text" name="stuNum" id="num" required lay-verify="required" autocomplete="off" class="layui-input">
    </div>

    <label class="layui-form-label">姓名:</label>
    <div class="layui-input-inline">
        <input type="text" name="stuName" id="name" required lay-verify="required" autocomplete="off" class="layui-input">
    </div>

    <label class="layui-form-label">班级:</label>
    <div class="layui-input-inline">
        <input type="text" name="stuClass" id="clazz" required lay-verify="required" autocomplete="off" class="layui-input">
    </div>
    <button class="layui-btn" id="btn">查询</button>
</div>


<table id="demo" lay-filter="test"></table>
<script>
    layui.use('table',function () {
        var table = layui.table;

        //第一个实例
        tableResult = table.render({
            elem: '#demo' //获取table标签对象,准备填充数据
            ,url: 'findScoreAll' //获取数据的接口(servlet)
            /*,where:{} */  //传额外参数到servlet
            ,page: true //开启分页
            ,size:"lg" //设置表格大小
            ,limit:5  //每页显示的条数是几条 (默认会向servlet发送 page(1)--第一页 和 limit(10)--显示10条 两个参数)
            ,limits:[5, 10, 15, 20, 25] //设置每页显示几条数据'
            ,toolbar:true  //工具头,开启 删选,导出,打印的根据头(显示在表格的右边)
            ,cols: [[ //表头
                {field: 'stuNum', title: '学号', fixed: 'left',align:"center"}
                ,{field: 'stuName', title: '姓名',align:"center"}
                ,{field: 'stuClass', title: '班级',align:"center"}
                ,{field: 'courseName', title: '科目' ,align:"center"}
                ,{field: 'scoreGrade', title: '成绩',align:"center"}
                ,{field: 'major', title: '专业',align:"center",}
            ]]
        });
    });
    $("#btn").click(function () {
        var stuNum = $("#num").val();
        var stuName = $("#name").val();
        var stuClass = $("#clazz").val();
        tableResult.reload({
            url:"findScore",//1 点击查询的servlet
            where:{//2 请求servlet的参数,多个参数使用逗号隔开
                stuNum:stuNum,
                stuName:stuName,
                stuClass:stuClass
            },
            page:{//3 保证查询结果填充页面的数据显示是从第一页开始
                curr:1 //默认值是 page:1
            }
        })
    });
</script>
</body>
</html>
